<!DOCTYPE html>
<html class="ng-app:myApp" id="ng-app" ng-app="myApp" xmlns:ng="http://angularjs.org"><!--  xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<title>Insert title here</title>

<link href="/res/lib/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="/res/lib/font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet" />
<link href="/res/lib/metisMenu/jquery.metisMenu.css" type="text/css" rel="stylesheet" />

<link href="/res/theme/admin/css/i-bootstrap.css" type="text/css" rel="stylesheet" />
<link href="/res/theme/admin/css/admin.css" type="text/css" rel="stylesheet" />
<link href="/res/theme/admin/css/main.css" type="text/css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="/res/lib/bootstrap/html5shiv.js"></script>
  <script src="/res/lib/bootstrap/respond.min.js"></script>
<![endif]-->

<!--[if lte IE 8]>
  <script src="/res/lib/json2.js"></script>
<![endif]-->
<!--[if lte IE 8]>
  <script>
    document.createElement('ng-include');
    document.createElement('ng-pluralize');
    document.createElement('ng-view');

    // Optionally these for CSS
    document.createElement('ng:include');
    document.createElement('ng:pluralize');
    document.createElement('ng:view');
  </script>
<![endif]-->
</head>
<body ng-controller="mainController">
  <div id="wrapper">
    <!-- header -->
    <nav id="top-nav" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" style="font-size: 20px;"><i class="fa fa-crosshairs"></i> Admin Panel</a>
      </div>
      <ul class="nav navbar-top-links navbar-right">
          <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="fa fa-user fa-fw"></i> &nbsp;User&nbsp; <i class="fa fa-caret-down"></i>
              </a>
              <ul class="dropdown-menu dropdown-user">
                  <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> 登出</a></li>
              </ul>
          </li>
      </ul>
    </nav>
    <!-- sidebar -->
    <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
            <li>
                <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> <span class="text">Dashboard</span></a>
            </li>
            <li class="active">
                <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> <span class="text">First Level</span><span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="flot.html"><span class="text">Second Level</span></a>
                    </li>
                    <li>
                        <a href="morris.html"><span class="text">Second Level</span></a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-sitemap fa-fw"></i> <span class="text">First Level</span><span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="#"><span class="text">Second Level Item</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="text">Second Level Item</span></a>
                    </li>
                    <li>
                        <a href="#"><span class="text">Third Level<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level">
                            <li>
                                <a href="#"><span class="text">Third Level Item</span></a>
                            </li>
                            <li>
                                <a href="#"><span class="text">Third Level Item</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>           
        </ul>
      </div>
    </nav>

    <div id="main-wrapper">
      <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <a href="#">Home</a>
          </li>
          <li class="active">Dashboard</li>
        </ul><!-- .breadcrumb -->
      </div>
      <div id="page-wrapper">
        
        <h3>h3. Bootstrap heading <small>Secondary text</small><small class="pull-right">Secondary text</small></h3>
        <div class="row">
          <div class="col5" ng-click="onClickSum('测试报表测试报表1')">
            <div class="panel-stat3 bg-light">
              <h2 class="m-top-none" id="userCount">969</h2>
              <h5>测试报表测试报表1</h5>
              <div class="stat-icon">
                <i class="fa fa-user fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表2')">
            <div class="panel-stat3 bg-light">
              <h2 class="m-top-none"><span id="serverloadCount">15</span>%</h2>
              <h5>测试报表测试报表2</h5>
              <div class="stat-icon">
                <i class="fa fa-hdd-o fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表3')">
            <div class="panel-stat3 bg-warning">
              <h2 class="m-top-none" id="orderCount">592</h2>
              <h5>测试报表测试报表3</h5>
              <div class="stat-icon">
                <i class="fa fa-shopping-cart fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表4')">
            <div class="panel-stat3 bg-light">
              <h2 class="m-top-none" id="visitorCount">8046</h2>
              <h5>测试报表测试报表4</h5>
              <div class="stat-icon">
                <i class="fa fa-bar-chart-o fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表5')">
            <div class="panel-stat3 bg-light">
              <h2 class="m-top-none" id="visitorCount">8046</h2>
              <h5>测试报表测试报表5</h5>
              <div class="stat-icon">
                <i class="fa fa-bar-chart-o fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
        </div>


        <h3>h3. Bootstrap heading <small>Secondary text</small><small class="pull-right">Secondary text</small></h3>
        <div class="row">
          <div class="col5" ng-click="onClickSum('测试报表测试报表6')">
            <div class="panel-stat3 bg-danger">
              <h2 class="m-top-none" id="userCount">969</h2>
              <h5>测试报表测试报表6</h5>
              <div class="stat-icon">
                <i class="fa fa-user fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表7')">
            <div class="panel-stat3 bg-primary">
              <h2 class="m-top-none"><span id="serverloadCount">15</span>%</h2>
              <h5>测试报表测试报表7</h5>
              <div class="stat-icon">
                <i class="fa fa-hdd-o fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表8')">
            <div class="panel-stat3 bg-warning">
              <h2 class="m-top-none" id="orderCount">592</h2>
              <h5>测试报表测试报表8</h5>
              <div class="stat-icon">
                <i class="fa fa-shopping-cart fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表9')">
            <div class="panel-stat3 bg-success">
              <h2 class="m-top-none" id="visitorCount">8046</h2>
              <h5>测试报表测试报表9</h5>
              <div class="stat-icon">
                <i class="fa fa-bar-chart-o fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
          <div class="col5" ng-click="onClickSum('测试报表测试报表10')">
            <div class="panel-stat3 bg-info">
              <h2 class="m-top-none" id="visitorCount">8046</h2>
              <h5>测试报表测试报表10</h5>
              <div class="stat-icon">
                <i class="fa fa-bar-chart-o fa-3x"></i>
              </div>
            </div>
          </div><!-- /.col -->
        </div>


        <div class="row">
          <div class="col-lg-6">
            <div class="panel panel-default">
              <div class="panel-heading clearfix">
                <span class="pull-left">
                  To Do List <span class="text-success m-left-xs"><i class="fa fa-check"></i></span>
                </span>
                <ul class="tool-bar">
                  <li><a href="#" class="refresh-widget" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Refresh"><i class="fa fa-refresh"></i></a></li>
                  <li><a href="#toDoListWidget" data-toggle="collapse"><i class="fa fa-arrows-v"></i></a></li>
                </ul>
              </div>
              <div class="panel-body no-padding collapse in" id="toDoListWidget">
                <ul class="list-group task-list no-margin collapse in">
                  <li class="list-group-item selected">
                    <label class="label-checkbox inline">
                       <input type="checkbox" class="task-finish" checked="">
                       <span class="custom-checkbox"></span>
                    </label>
                    SEO Optimisation
                    <span class="pull-right">
                      <a href="#" class="task-del"><i class="fa fa-trash-o fa-lg text-danger"></i></a>
                    </span>
                  </li>
                  <li class="list-group-item">
                    <label class="label-checkbox inline">
                       <input type="checkbox" class="task-finish">
                       <span class="custom-checkbox"></span>
                    </label>
                    Unit Testing
                    <span class="pull-right">
                      <a href="#" class="task-del"><i class="fa fa-trash-o fa-lg text-danger"></i></a>
                    </span>
                  </li>
                  <li class="list-group-item">
                    <label class="label-checkbox inline">
                       <input type="checkbox" class="task-finish">
                       <span class="custom-checkbox"></span>
                    </label>
                    Mobile Development 
                    <span class="pull-right">
                      <a href="#" class="task-del"><i class="fa fa-trash-o fa-lg text-danger"></i></a>
                    </span>
                    <span class="badge badge-success m-right-xs">3</span>
                  </li>
                  <li class="list-group-item">
                    <label class="label-checkbox inline">
                       <input type="checkbox" class="task-finish">
                       <span class="custom-checkbox"></span>
                    </label>
                    Database Migration
                    <span class="pull-right">
                      <a href="#" class="task-del"><i class="fa fa-trash-o fa-lg text-danger"></i></a>
                    </span>
                  </li>
                  <li class="list-group-item">
                    <label class="label-checkbox inline">
                       <input type="checkbox" class="task-finish">
                       <span class="custom-checkbox"></span>
                    </label>
                    New Frontend Layout <span class="label label-warning m-left-xs">PENDING</span>
                    <span class="pull-right">
                      <a href="#" class="task-del"><i class="fa fa-trash-o fa-lg text-danger"></i></a>
                    </span>
                  </li>
                  <li class="list-group-item">
                    <label class="label-checkbox inline">
                       <input type="checkbox" class="task-finish">
                       <span class="custom-checkbox"></span>
                    </label>
                    Bug Fixes <span class="label label-danger m-left-xs">IMPORTANT</span>
                    <span class="pull-right">
                      <a href="#" class="task-del"><i class="fa fa-trash-o fa-lg text-danger"></i></a>
                    </span>
                  </li>
                </ul><!-- /list-group -->
              </div>
            </div><!-- /panel -->
          </div>
        </div> 



      </div>
    </div>
    <!-- page -->
    

  </div>


  <!-- Modal -->
  <!-- Modal -->
  <div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="modal1Label">{{modalTitle1}}</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-5" id="block1">
              <div class="alert alert-info" ng-show="block1.result.length == 0">
                  No result found
              </div>
              <div i-dg="result" ng-show="block1.result.length > 0">
                <table class="table table-bordered table-condensed table-hover">
                  <thead>
                      <tr>
                          <th>id</th>
                          <th>name</th>
                          <th>value</th>
                      </th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr ng-repeat="row in block1.result" ng-click="block2.onQuery(row.id, $event);">
                          <td>{{row.id}}</td>
                          <td>{{row.name}}</td>
                          <td>{{row.val}}</td>
                      </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="col-lg-7" id="block2">
              <div class="alert alert-info" ng-show="block2.result.length == 0">
                  No result found
              </div>
              <div i-dg="result" ng-show="block2.result.length > 0">
                <table class="table table-bordered table-condensed table-hover">
                  <thead>
                      <tr>
                          <th>id</th>
                          <th>name</th>
                          <th>value</th>
                          <th>date</th>
                      </th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr ng-repeat="row in block2.result">
                          <td>{{row.id}}</td>
                          <td>{{row.name}}</td>
                          <td>{{row.val}}</td>
                          <td>{{row.dat | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                      </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  
</body>

<script src="/res/lib/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/res/lib/jquery-migrate-1.2.1.js" type="text/javascript"></script>

<script src="/res/lib/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="/res/lib/angularjs/angular.min.js"></script>
<script src="/res/lib/angularjs/angular-route.js"></script>
<script src="/res/lib/angularjs/plugin/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="/res/lib/angularjs/plugin/i-angular.js"></script>

<script src="/res/lib/metisMenu/jquery.metisMenu.js"></script>
<script src="/res/lib/jquery.blockUI.js"></script>

<script src="/res/js/utils/admin_lib.js"></script>

<script src="/res/js/admin/route.js"></script>
<script src="/res/js/admin/admin.js"></script>

<script>
Date.prototype.format = function(format) //author: meizz 
{ 
  var o = { 
    "M+" : this.getMonth()+1, //month 
    "d+" : this.getDate(),    //day 
    "h+" : this.getHours(),   //hour 
    "m+" : this.getMinutes(), //minute 
    "s+" : this.getSeconds(), //second 
    "q+" : Math.floor((this.getMonth()+3)/3),  //quarter 
    "S" : this.getMilliseconds() //millisecond 
  };
  if(/(y+)/.test(format)) format=format.replace(RegExp.$1, 
    (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
  for(var k in o)if(new RegExp("("+ k +")").test(format)) 
    format = format.replace(RegExp.$1, 
      RegExp.$1.length==1 ? o[k] : 
        ("00"+ o[k]).substr((""+ o[k]).length)); 
  return format; 
};

  $(function() {
    console.log($.now());
    console.log(new Date().getTime());
    console.log(new Date(new Date().getTime()));

    var downTime = new Date().getTime();
    downTime = new Date(downTime*1000);
    downTime = downTime.format('yyyyMMdd hhmmss');
    alert(downTime);
  });

  myApp.controller('mainController', function($scope, $http, $filter) {

    $scope.setErrMsg = function(msg) {
      $scope.showMsg = true;
      $scope.msgClass = "alert alert-danger";
      $scope.msg = msg;
    };
    $scope.setSusMsg = function(msg) {
      $scope.showMsg = true;
      $scope.msgClass = "alert alert-success";
      $scope.msg = msg;
    };
    $scope.resetMsg = function() {
      $scope.showMsg = false;
      $scope.msg = '';
    };

    $scope.onClickSum = function(name){
      $scope.block1.result = null;
      $scope.block2.result = null;

      $scope.modalTitle1 = name;
      $('#modal1').modal();
      $scope.block1.onQuery(name);
    };

    var block1Dom = $("#block1");
    $scope.block1 = {
      onQuery : function(name) {
        var data = [
          {id:'1', name:'name', val:111},
          {id:'2', name:'name', val:111},
          {id:'3', name:'name', val:111},
          {id:'4', name:'name', val:111},
          {id:'5', name:'name', val:111},
          {id:'6', name:'name', val:111},
          {id:'7', name:'name', val:111},
          {id:'8', name:'name', val:111},
          {id:'9', name:'name', val:111},
          {id:'10', name:'name', val:111},
          {id:'11', name:'name', val:111},
          {id:'12', name:'name', val:111},
          {id:'13', name:'name', val:111},
          {id:'14', name:'name', val:111},
          {id:'15', name:'name', val:111},
          {id:'16', name:'name', val:111},
          {id:'17', name:'name', val:111},
          {id:'18', name:'name', val:111},
          {id:'19', name:'name', val:111},
          {id:'20', name:'name', val:111}
        ];

        $scope.block1.result = data;
      }
    };

    var block2Dom = $("#block2");
    $scope.block2 = {
      onQuery : function(id, event) {
        var elem = angular.element(event.srcElement);
        elem.parents("tbody").find("tr").removeClass("bg-success");
        elem.closest("tr").addClass("bg-success");

        var date = new Date();
        var data = [
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date},
          {id:id, name:'name', val:111, dat: date}
        ];

        $scope.block2.result = data;
      }
    };
  });
</script>

</html>